<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData" :loading="loading">
    <template v-slot:RollingTop>
      <div class="take-container-search">
        <z-search
          v-model="searchInfo"
          placeholder="请输入会员手机号"
          @query="onHandleSearch"
          type="number"
          @update:model-value="onUpdateVal"
        ></z-search>
      </div>
      <!-- <div class="take-container-member" v-show="flag">
        <div class="take-member-header">
          <div class="header-id">NO.{{ memberInfo.MemberCode }}</div>
        </div>
        <div class="take-member-main">
          <div class="take-main-left">
            <van-image :src="ava" class="ava" />
            <van-image
              :src="genderGirl"
              class="gender"
              v-if="memberInfo.MemberSex === '女'"
            />
            <van-image :src="genderBoy" class="gender" v-else />
          </div>
          <div class="take-main-right">
            <div class="take-right-name">{{ memberInfo.MemberName }}</div>
            <div class="take-right-phone">{{ memberInfo.MemberMobile }}</div>
          </div>
        </div>
        <ul class="take-member-footer">
          <li>
            <div class="take-footer-value">
              {{ memberInfo.WineStoreTotal?memberInfo.WineStoreTotal:0
              }}<span class="take-footer-bot">瓶</span>
            </div>
            <div class="take-footer-title">寄存中</div>
          </li>
          <li>
            <div class="take-footer-value">
              {{ memberInfo.WineTakeTotal?memberInfo.WineTakeTotal:0
              }}<span class="take-footer-bot">瓶</span>
            </div>
            <div class="take-footer-title">已领取</div>
          </li>
          <li>
            <div class="take-footer-value">
              {{ memberInfo.WineExpireTotal?memberInfo.WineExpireTotal:0
              }}<span class="take-footer-bot">瓶</span>
            </div>
            <div class="take-footer-title">已过期</div>
          </li>
        </ul>
      </div> -->
      <div class="statistics-container-summary" v-show="flag">
          <div class="statistics-summary-upper">
            <div class="summary-upper-title">{{ memberInfo.MemberName }}</div>
            <div class="summary-upper-value">{{ memberInfo.MemberMobile }}</div>
          </div>
          <div class="statistics-summary-below">
            <div class="summary-below-item">
              <div class="summary-below-value">{{ memberInfo.WineStoreTotal?memberInfo.WineStoreTotal:0
              }}<span class="below-value-spe">瓶</span></div>
              <div class="summary-below-title">寄存中</div>
              <div class="summary-below-line"></div>
            </div>
            <div class="summary-below-item">
              <div class="summary-below-value">{{ memberInfo.WineTakeTotal?memberInfo.WineTakeTotal:0
              }}<span class="below-value-spe">瓶</span></div>
              <div class="summary-below-title">已领取</div>
              <div class="summary-below-line"></div>
            </div>
            <div class="summary-below-item">
              <div class="summary-below-value">{{ memberInfo.WineExpireTotal?memberInfo.WineExpireTotal:0
              }}<span class="below-value-spe">瓶</span></div>
              <div class="summary-below-title">已过期</div>
            </div>
          </div>
        </div>
    </template>
    <template v-slot:extension>
      
    </template>
    <div class="take-container">
      <div class="take-container-main" v-show="flag">
        <div class="take-main-title">
          <div>存酒信息</div>
          <div  v-if="ls.get('ORG_CODE') == '0024' || ls.get('ORG_CODE') == '0025' || ls.get('ORG_CODE') == '0021' || ls.get('ORG_CODE') == '0027'" class="take-code" :class="disabledSend  ? 'disabled' : '' " @click="getCode">
            <div v-if="disabledSend">短信已发送<van-count-down :time="timeDown" @finish="timeFinish" /></div>
            
            <div v-else>获取取酒码</div>
          </div>
        </div>
        <div class="take-main-center">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
          >
            <div
              class="main-center-item"
              v-for="(item, index) in wineInfo"
              :key="index"
            >
              <div class="item-name">{{ item.GoodsName }}</div>
              <div class="item-time">
                <div class="item-left">过期时间：</div>
                <div class="item-right">
                  {{ dayjs(item.ExpireDate).format('YYYY-MM-DD') }}
                  {{ dayjs(item.ExpireDate).format('HH:mm:ss') }}
                </div>
                <div
                  class="item-ispass"
                  v-if="dayjs(item.ExpireDate).valueOf() < timestamp"
                >
                  已过期
                </div>
              </div>
              <div class="item-position">
                <div class="item-left">寄存位置：</div>
                <div class="item-right">
                  {{ item.StorePostion === '1' ? '吧台' : '仓库' }}
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-left">
                  <div class="item-left">剩余数量：</div>
                  <div class="item-num">{{ item.CurrentQty }}</div>
                  <div class="item-right">瓶</div>
                  <div class="item-label">
                    {{ item.CurrentQty < 1 ? '非整瓶' : '整瓶' }}
                  </div>
                </div>
                <div
                  class="item-footer-right"
                  :class="{
                    active: dayjs(item.ExpireDate).valueOf() < timestamp
                  }"
                  @click="
                    operate(
                      item.ExpireDate,
                      item.GoodsName,
                      item.CurrentQty,
                      item.WineCode
                    )
                  "
                >
                  {{
                    dayjs(item.ExpireDate).valueOf() < timestamp
                      ? '延期'
                      : '领取'
                  }}
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <div class="take-empty" v-show="!flag">
      <van-image :src="search" class="take-empty-img" />
      <div class="take-empty-info">搜索会员信息查询~</div>
    </div>
  </page-wrap>
  <!-- 弹窗 -->
  <z-popup
    v-model:show="winePopup"
    style="overflow: 'hidden'"
    :title="popupTitle"
  >
    <div class="popup-container" :class="{'popup-yqcontinar':popupTitle === '延期'}">
      <div class="popup-main">
        <div
          class="popup-main-title"
          v-show="determineNum === '非整瓶' && popupTitle === '取酒'"
        >
          <span>确认取出</span
          ><span style="color: #ffaa00">{{ inpValue1 }}</span
          ><span>{{ wineName }}?</span>
        </div>
        <div
          class="popup-main-numInp"
          v-show="determineNum === '整瓶' && popupTitle === '取酒'"
        >
          <div class="popup-item-title">取出数量</div>
          <van-field
            v-model="inpValue1"
            placeholder="请输入数量"
            type="number"
          />
          <div class="popup-item-icon">瓶</div>
        </div>
        <div class="popup-main-tabInp" style="margin-bottom: 0;" v-show="popupTitle === '取酒'">
          <div class="tabInp-title">取酒桌号</div>
          <div class="tabInp-value" @click="tableSelectShow = true">
            {{ tableNumber ? tableNumber : '请选择桌号' }}
            <div class="icon"></div>
          </div>
        </div>
        <div
          v-if="ls.get('ORG_CODE') == '0024' || ls.get('ORG_CODE') == '0025' || ls.get('ORG_CODE') == '0021' || ls.get('ORG_CODE') == '0027'"
          class="popup-main-numInp" style="margin-top: 20px;"
        >
         <template  v-if="popupTitle == '取酒'">
          <div class="popup-item-title">取酒码</div>
          <van-field
            v-model="winValue"
            placeholder="请输入取酒码"
            type="text"
            class="spe-field"
          />
        </template>
      </div>
        <div class="popup-main-extension" v-show="popupTitle === '延期'">
          <div>确认延期该酒水？</div>
        </div>
        <div class="popup-main-extensionDay" v-show="popupTitle === '延期'">
          <div class="popup-item-title">延期天数</div>
          <van-field
            v-model="inpValue2"
            placeholder="请输入天数"
            type="number"
          />
          <div class="popup-item-icon">天</div>
        </div>
      </div>
      <div class="popup-footer">
        <z-button-group class="button-group">
          <z-button @click="onCancel" plain style="width: 120px">取消</z-button>
          <z-button @click="onSubmit" :disabled="canUse" style="width: 120px"
            >确定</z-button
          >
        </z-button-group>
      </div>
    </div>
  </z-popup>
  <!-- 选择桌台组件 -->
  <TableSelectSpe
    v-model:show="tableSelectShow"
    @close="onTableSelectClose"
    title="取酒"
    source="save"
    line="1"
    state="2,3"
  ></TableSelectSpe>
</template>

<script setup>
import dayjs from 'dayjs'
import ava from '@/assets/images/workbench/defaultAvatar.png'
import genderBoy from '@/assets/images/take/i_take_gender.png'
import genderGirl from '@/assets/images/common/i_gender_girl.png'
import search from '@/assets/images/take/i_take_search.png'
import Api from '@/api'
import ls from '@/lib/ls'
import { showToast } from 'vant'
import useAppStore from '@/store/app'
const appStore = useAppStore()
// 获取登录的服务员账户
const account = ref(appStore.user_info)
const flag = ref(false) // 是否显示
const searchInfo = ref('')

let takeCodeTime = null
function validatePhoneNumber(phone) {
    const phonePattern = /^1[3-9]\d{9}$/;
    return phonePattern.test(phone);
}
 
const disabledSend = ref(false)  // 不可发送短信标记
const timeDown = ref(0)
const timeFinish = ()=>{
  disabledSend.value = false
}




const getCode = async()=>{

  if(!validatePhoneNumber(searchInfo.value)){
    showToast('请输入正确手机号')
    return
  }
  if(disabledSend.value){
    showToast('已发送取酒码，请会员在手机上查看消息')
    return
  }
  
  
  loading.value = true
  const randomNumber = Math.floor(Math.random() * 900000) + 100000;
  Api.Common.AppObjProcess.Do({
    functionName: 'WineTakeVerificationCode',
    contentData: {mobile:searchInfo.value,verificationCode:randomNumber}
  }).then(res=>{
    showToast('取酒码发送成功，请会员在手机上查看消息')
    loading.value = false
   
    disabledSend.value = true // 不可发送短信

    // 五分钟的毫秒数
    let currentTimestamp = Date.now();
    let fiveMinutesLater = currentTimestamp + (5 * 60 * 1000);
    timeDown.value = fiveMinutesLater - currentTimestamp // 倒计时

   
 
  }).catch(err=>{
    // showToast('生成取酒码失败')
    loading.value = false
  })

}

// 搜索
const onHandleSearch = function (val) {
  flag.value = false
  postForm.mobile = searchInfo.value
  postForm.barCode = searchInfo.value
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    flag.value = false
    postForm.mobile = val
    postForm.barCode = val
    loadData(true)
  }, 500)
}
//表单
const postForm = reactive({
  mobile: '',
  pageIndex: 1,
  pageSize: 999
})
// 监听电话号码，清零时关上开关
watch(
  searchInfo,
  (newVal, oldVal) => {
    if (newVal === '') {
      flag.value = false
    }
  }
  // { deep: true }
)
const memberInfo = ref({})
const wineInfo = ref([])
// 当前时间戳
const timestamp = new Date().getTime()
//-----------------------------------------------------------取酒弹窗和延期弹窗-------------------------------------------------------------------
const winePopup = ref(false) // 弹窗显示
const popupTitle = ref('取酒') // 弹窗标题
const wineName = ref('') // 酒水名称
const inpValue1 = ref('') // 输入的数量
const winValue = ref('') // 输入的取酒码
const inpValue2 = ref('') // 输入的天数
const GoodsID = ref('') // 商品id
const roomID = ref('') // 房间号
const determineNum = ref('') // 用来判断是否显示取出数量 >=1则显示
// 取酒或延期
const operate = (ExpireDate, name, num, WineCode) => {
  tableNumber.value = undefined
  winePopup.value = true
  // winValue.value = ''
  canUse.value = false // 确定按钮权限
  roomID.value = '' // 将桌台清空
  if (dayjs(ExpireDate).valueOf() > timestamp) {
    popupTitle.value = '取酒'
    if (num < 1) {
      determineNum.value = '非整瓶'
    } else {
      determineNum.value = '整瓶'
    }
  } else {
    popupTitle.value = '延期'
  }
  // 给弹窗赋值
  inpValue1.value = num // 整瓶输入框输入的数量
  wineName.value = name // 酒水名称
  GoodsID.value = WineCode // 商品id
}
// 选择桌台
const tableSelectShow = ref(false)
const tableNumber = ref(undefined)
const onTableSelectClose = (type, args) => {
  tableSelectShow.value = false
  if (type == 'back') return
  const { roomName, roomCode } = args
  if (roomName) {
    tableNumber.value = args.roomName
    roomID.value = args.roomCode
  }
}
// 取消
const onCancel = () => {
  winePopup.value = false
}
const canUse = ref(true) // 确定按钮权限控制
// 监听取酒数量的变化 数量为零不能取酒
watch(
  () => inpValue1.value,
  (newVal, oldVal) => {
    if (newVal > 0) {
      canUse.value = false
    } else {
      canUse.value = true
    }
  }
)
// 确定
const onSubmit = () => {
 

  if (popupTitle.value === '取酒') {
    if (!roomID.value) {
      showToast('请选择桌号')
      return
    } else if (
      determineNum.value === '整瓶' &&
      !Number.isInteger(Number(inpValue1.value))
    ) {
      // 如果输入值不是整数，进行相应的处理
      showToast('只能取出整瓶')
      return
    } else if(!winValue.value)  {
      if(ls.get('ORG_CODE') == '0024' || ls.get('ORG_CODE') == '0025' || ls.get('ORG_CODE') == '0021' || ls.get('ORG_CODE') == '0027') {
        showToast('请输入取酒码')
        return
      }
    }
 
    loading.value = true
    const wineTake = Api.Common.AppObjProcess.Do({
      functionName: 'wineTake',
      contentData: {
        mobile: postForm.mobile,
        winStoreCode: GoodsID.value,
        takeQty: inpValue1.value,
        userName: account.value.userName,
        roomCode: roomID.value,
        barCode: winValue.value,
      }
    })
      .then(res => {
        loadData(true)
        showToast('取酒成功')
        winePopup.value = false
      })
      .catch(err => {
        loading.value = false
      })
   
  } else if (popupTitle.value === '延期') {
    showToast('酒水延期请去前台')
   return
    if (inpValue2.value < 1 || !Number.isInteger(Number(inpValue2.value))) {
      // 如果输入值不是整数，进行相应的处理
      showToast('延期时间应为整天')
      return
    }
    const wineDelay = Api.Common.AppObjProcess.Do({
      functionName: 'wineDelay',
      contentData: {
        mobile: postForm.mobile,
        winStoreCode: GoodsID.value,
        delayDay: inpValue2.value
      }
    })
      .then(res => {
        loadData(true)
        showToast('延期成功')
      })

   winePopup.value = false
  }
 
  
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if(!validatePhoneNumber(searchInfo.value)){
    showToast('请输入正确手机号')
    return
  }
  disabledSend.value = false
  if (refresh === true) {
    postForm.pageIndex = 1
    wineInfo.value = []
    finished.value = false
  }
  loading.value = true
  const resp = Api.Common.AppObjProcess.Do({
    functionName: 'getWineStoreList',
    contentData: postForm
  })
    .then(res => {
      const nowList = res.WineStores
      memberInfo.value = res.MemberInfo
      if (memberInfo.value.MemberCode) {
        flag.value = true
      }
      if (refresh === true) {
        if (nowList.length !== postForm.pageSize) {
          finished.value = true
        }
      }
      wineInfo.value = nowList
      // Array.prototype.push.apply(wineInfo.value, nowList)
      if (nowList.length > 0) {
        // postForm.pageIndex++
      } else {
        finished.value = true
      }
      loading.value = false
      if (refresh === true) {
        initBs.value++
      }
    })
    .catch(err => {
      
    })
}
</script>

<style scoped lang="scss">
.take-container {
  .take-container-search {
  }

  .take-container-main {
    margin: 0 12px 20px;
    .take-main-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 16px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .take-code{
        width: 90px;
        height: 30px;
        background: #5C5C66;
        border-radius: 4px;
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #FFAA00;
        line-height: 30px;
      }
      .disabled{
        filter: grayscale(100%); /* 100% 灰度，变成完全灰色 */
      }
    }
    .take-main-center {
      .main-center-item {
        padding: 12px;
        background: #28282e;
        border-radius: 8px;
        margin-bottom: 10px;
        .item-name {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 16px;
          padding-bottom: 12px;
        }
        .item-time {
          display: flex;
          align-items: center;
          padding-bottom: 12px;
          .item-ispass {
            margin-left: 8px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ff3333;
            line-height: 14px;
          }
        }
        .item-position {
          display: flex;
          align-items: center;
        }
        .item-footer {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          .item-footer-left {
            display: flex;
            align-items: center;
            .item-num {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffaa00;
              line-height: 14px;
            }
            .item-label {
              margin-left: 8px;
              background: #454d41;
              border-radius: 2px;
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #8ae65c;
              line-height: 12px;
              padding: 4px 9px;
            }
          }
          .item-footer-right {
            background: #5c5c66;
            border-radius: 2px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fffffe;
            line-height: 16px;
            padding: 8px 14px;
            &.active {
              color: #ffaa00;
            }
          }
        }
        .item-left {
          font-size: 14px;
          line-height: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }
        .item-right {
          font-size: 14px;
          line-height: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
  }
}
.take-container-member {
  margin: 10px 12px 30px;
  background-image: url('@/assets/images/common/i_member_card.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .take-member-header {
    display: flex;
    .header-id {
      background: #ecdeb4;

      padding: 5px 11px;

      border-radius: 8px 0px 10px 0px;
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #664b14;
      margin-bottom: 20px;
    }
  }
  .take-member-main {
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-bottom: 10px;
    .take-main-left {
      position: relative;
      margin-right: 12px;
      .ava {
        width: 50px;
        height: 50px;
      }
      .gender {
        width: 18px;
        height: 18px;
        position: absolute;
        right: 0;
        bottom: 5px;
      }
    }
    .take-main-right {
      .take-right-name {
        line-height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #80590d;
        padding-bottom: 8px;
      }
      .take-right-phone {
        line-height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b38324;
      }
    }
  }
  .take-member-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    .take-footer-value {
      line-height: 22px;
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #b35900;
      padding-bottom: 12px;
      .take-footer-bot {
        padding-left: 4px;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        line-height: 12px;
        color: #cc7a29;
      }
    }
    .take-footer-title {
      text-align: center;
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #b38324;
    }
  }
}
.statistics-container-summary {
      background: #28282e80;
      box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
      border-radius: 8px;
      padding: 20px 12px;
      margin: 0 12px 30px;
      .statistics-summary-upper {
        display: flex;
        align-items: flex-end;
        position: relative;
        padding-bottom: 12px;
        border-bottom: 1px solid #383840;
  
        .summary-upper-value {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #CCCCCC;
        }
        .summary-upper-title {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 18px;
          color: #FFFFFF;
          margin-right: 6px
        }
      }
      .statistics-summary-below {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .summary-below-item {
          flex-basis: 33.33%;
          text-align: center;
          position: relative;
          .summary-below-line {
            position: absolute;
            width: 1px;
            height: 40px;
            right: 0px;
            top: 22px;
            background-image: url('@/assets/images/common/i_onwine-line.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
          }
        }

        .summary-below-value {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 22px;
          color: #FFAA00;
          padding: 12px 0;
          .below-value-spe{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #999999;
            margin-left: 4px;
          }
        }
        .summary-below-title {
          line-height: 12px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }
      }
}
.take-empty {
  text-align: center;
  .take-empty-img {
    width: 180px;
    height: 180px;
    margin-top: 70px;
    margin-bottom: 12px;
  }
  .take-empty-info {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 16px;
  }
}
.popup-container {
  padding: 30px 24px 20px;
  .popup-main {
    .popup-main-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      margin-bottom: 27px;
      text-align: center;
    }
    .popup-main-numInp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 12px;
    }
    .popup-main-tabInp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      .tabInp-title {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 16px;
        margin-right: 10px;
      }
      .tabInp-value {
        background: #5c5c66;
        border-radius: 4px;
        width: 180px;
        padding: 12px 0 12px 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 16px;
        position: relative;
        .icon {
          width: 6px;
          height: 11px;
          position: absolute;
          right: 12px;
          top: 15px;
          background-image: url('@/assets/svg/common/v_triangle_right_white.svg');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .popup-main-extension {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
      margin-bottom: 27px;
    }
    .popup-main-extensionDay {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 30px;
    }
    .popup-item-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
      margin-right: 10px;
    }
    .take-code{
      width: 50px;
      height: 40px;
      background: #5C5C66;
      border-radius: 4px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
    }
    .popup-item-icon {
      position: absolute;
      right: 15px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
    }

    ::v-deep(.van-field) {
      padding: 0;
      width: 180px;
      background: #5c5c66;
      border-radius: 4px;
      // &.spe-field{
      //   width: 120px;
      // }
      
    }
    
    ::v-deep(.van-field__control) {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      padding: 10px 0 10px 12px;
      background: #5c5c66;
    }
    ::v-deep(.van-field__body) {
      background: #5c5c66;
    }
    ::v-deep(.van-cell:after) {
      display: none;
    }
  }
  .popup-footer {
    .button-group {
      display: flex;
      justify-content: space-between;
    }
  }
}
.popup-yqcontinar {
  padding: 0px 24px 10px !important;
}
::v-deep{
  .van-count-down{
    color: #ffffff;
  }
}
</style>
